<template>
  <div>
    <el-card class="order-submit-card">
      <van-nav-bar
        title="提交订单"
        left-text="返回"
        class="ding"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="order-content">
        <span class="address-title">收货地址</span>
        <el-row class="aa">
          <el-col :span="24" class="delivery-address">
            <div class="">
              <span class="product-name">{{ orders.addressName }},</span>
              <span class="address-tel">{{ orders.tel }}</span><br>
              <span class="address-city">
                {{orders.province}} {{ orders.city }} {{ orders.county }} {{ orders.addressDetail }}
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <span class="exchange-goods-title">兑换商品</span>
          <el-col :span="24">
            <div class="product-image-container">
              <img :src="orders.image" alt="product" class="product-image" height="100px">
              <span class="">{{ orders.name }}</span>
              <span class="qq">{{ orders.score }}积分</span>
            </div>
          </el-col>
        </el-row>
        <div class="goods-subtotal">
<!--          <van-stepper v-model="orders.number"></van-stepper>-->
          <span class="subtotal-title">共 {{ orders.number }} 件商品</span>
          <span class="subtotal-title">共记：{{ orders.zong }}积分</span>
        </div>
        <van-submit-bar button-text="提交订单" @submit="submitOrder">消耗<span class="eee">{{ orders.zong }}</span>积分</van-submit-bar>
        <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
          <!-- 关闭按钮 -->
          <div class="popup-close" @click="guanbi()">
            <el-button type="text" icon="el-icon-close" style="width: 20px"></el-button>
            <span class="popup-close-text">关闭</span>
          </div>
          <el-row>
            <span class="exchange-goods-title">请支付</span>
            <el-col :span="24">
              <div class="">
                <span class="ww">{{ orders.zong }}积分</span>
              </div>
              <!-- 添加支付方式和剩余积分显示 -->
              <span>支付方式: 积分支付</span>
              <div>
                <span>当前账户剩余积分: {{ user.score }}</span>
              </div>
            </el-col>
          </el-row>
          <!-- 密码输入框的弹框内容 -->
          <div class="popup-content">
            <van-password-input
              :value="value"
              info="密码为 6 位数字"
              :error-info="errorInfo"
              :focused="showKeyboard"
              @focus="showKeyboard = true"
            />
            <van-number-keyboard
              v-model="value"
              :show="showKeyboard"
              @blur="showKeyboard = false"
            />
          </div>
        </van-popup>
      </div>
    </el-card>
  </div>
</template>

<script>
import {Toast} from "vant";
import axios from "axios";


export default {
  data() {
    return {
      product: {},
      addressList: {},
      number: 1,
      zong: '',
      value: '',
      errorInfo: '',
      showKeyboard: false,
      show: false,
      mima:'',
      user:{},
      orders:{},
      orderId:'',
    };
  },
  methods: {
    findOrder(){
      console.log("OrderId=" + this.orderId )
      axios.get(`/orders/orders/findByOrderId?findId=${this.orderId}`).then(res=>{
        console.log(res.data.data.orders)
        localStorage.setItem("order",JSON.stringify(res.data.data.orders))
        this.orders = res.data.data.orders
      })
    },
    orderAdd(){
      console.log("orders=" +this.orders)
      axios.post("/orders/orders/orderAdd02", this.orders).then(res => {
        if (res.data.code == 200) {
          Toast.success('下单成功');
          this.show = false; // 关闭弹框
          localStorage.setItem('order',JSON.stringify(res.data.data.orders))
          this.$router.push('/paySuccess');
          // this.$router.push('/orderList');
        } else {
          Toast.fail(res.data.message);
        }
      });
    },
    //关闭订单
    guanbi() {
      this.show = false;
    },
    //根据用户id查询用户的支付密码
    getPayPassword() {
      axios.post("/user/user/getPayPassword?id=" + this.user.id).then(res => {
        if (res.data.code == 200) {
          this.mima = res.data.data.payPassword;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    //查询用户信息
    findUserById() {
      axios.post(`/user/user/findById?id=${this.userId}`).then(res => {
        this.user = res.data.data;
      })
    },
    //+++++++++计算总积分方法++++++++++
    jisuan() {
      this.zong = this.number * this.product.score;
      console.log("商品积分" + this.zong)
    },
    onEdit(addressList) {
      //这里可以添加跳转到编辑收货地址页面的逻辑，例如传递收货地址数据到编辑页面
      // 这里假设使用vue-router进行页面跳转，跳转到编辑地址页面，并传递地址信息和省市区数据
      this.$router.push({path: '/editAddress', query: {address: addressList}})
      this.addressList = addressList;
      console.log("编辑地址" + this.address);
      this.$router.push({path: '/editAddress'});
      localStorage.setItem("address", JSON.stringify(addressList))//将地址数据存储到localStorage中
    },
    submitOrder() {
      this.show = true;
      this.value = '';
      console.log('请输入密码......');
    },
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.go(-1);
    },
  },
  mounted() {
    var orderId = localStorage.getItem('orderId');
    if (orderId) {
      this.orderId = JSON.parse(orderId);
      console.log("orderId=", this.orderId);
      // 假设收货地址也存储在localStorage中，这里可以添加获取收货地址的逻辑
      var address = localStorage.getItem('address');
      if (address) {
        this.addressList = JSON.parse(address);
      }
    }
    this.findOrder();
    var user = localStorage.getItem('user');
    if (user) {
      this.user = JSON.parse(user);
      this.userId = this.user.id;
      console.log("uid=", this.userId);
    }
    this.jisuan()
    this.getPayPassword();
    this.findUserById();
    // 示例中直接赋值了一个固定的收货地址，实际使用时应该从后端或localStorage获取
  },
  watch: {
    number: function () {
      this.jisuan();
    },
    value(value) {
      if (value.length === 6 && value !== this.mima) {
        this.errorInfo = '密码错误';
      } else if (value === this.mima){
        Toast('密码正确!!!')
        this.orderAdd();
      }
    },
  }
};
</script>

<style scoped>
.order-submit-card {
  margin: 10px;
}

.qq {
  color: #e45a5a;
}
.ww{
  color: #090909;
  font-size: 35px;
}

.aa {
  text-align: left;
}
.eee{
  color: #0f2ecf;
  font-size: 35px;
}
.xiao {
  color: #999;
  margin-top: 5px;
  display: block;
  line-height: 1.5;
  font-size: 14px;
}

.ding {
  background-color: #FF4D4F;
  color: white;
}

.order-content {
  padding: 20px;
}

.delivery-address {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.address-title {
  font-weight: bold;
  float: left;
  margin-bottom: 5px;
}

.exchange-goods-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.product-image-container {
  text-align: center;
  margin-bottom: 10px;
  float: left;
}

.product-info-container {
  text-align: left;
}

.address-tel {
  display: block;
  line-height: 1.5;
  font-weight: 10;
}

.address-city {
  display: block;
  font-size: 14px;

  color: #999;
}

.product-name,
.product-points {
  float: left;
}

.goods-subtotal,
.freight-deduction,
.total-points {
  margin-bottom: 15px;
}

.subtotal-title,
.deduction-title,
.total-points-title {
  font-weight: bold;
  margin-right: 10px;
}
</style>
